<template>
  <div :id="container" class="map"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps({
  container: {
    type: String,
    default: () => 'map'
  },
  center: {
    type: Array<number>,
    default: () => [103.75254, 37.06996]
  },
  zoom: {
    type: Number,
    default: () => 3
  }
})

let map = null

onMounted(() => {
  initMap()
})

function initMap() {
  const style = {
    name: 'my-style',
    version: 8,
    sources: {
      'amap-vec': {
        type: 'raster',
        "scheme": "xyz",
        "tileSize": 256,
        tiles: [
          'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
          'http://webrd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
          'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
          'http://webrd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
        ]
      }
    },
    layers: [
      {
        id: 'amap-vec',
        type: 'raster',
        source: 'amap-vec'
      }
    ]
  }
  map = new mapboxgl.Map({
    container: props.container,
    style,
    center: props.center,
    zoom: props.zoom,
    doubleClickZoom: true,
    dragPan: true,
    hash: false,
    attribute: false
  });
}
</script>



<style scoped>
.map {
  height: 100%;
  overflow: hidden;
}
</style>
